@import "./Variables";

@font-face {
  font-family: "iconfont";
  src: url("./iconfont/iconfont.eot");
  src: url("./iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
    url("./iconfont/iconfont.woff2") format("woff2"),
    url("./iconfont/iconfont.woff") format("woff"),
    url("./iconfont/iconfont.ttf") format("truetype"),
    url("./iconfont/iconfont.svg#iconfont") format("svg");
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(1rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-enter {
  opacity: 0;
  transform: translateY(10rem);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);

  transition: opacity 100ms ease-in 100ms, transform 200ms ease-out;
}

.fade-enter-done {
  opacity: 1;
  transform: translateY(0);
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  transform: translateY(2rem);
  opacity: 0;
  transition: opacity 100ms ease-in, transform 100ms ease-in;
}

.fade-exit-done {
  opacity: 0;
}

html {
  transition: filter ease-in 200ms;

  &.formium-app-deactivate {
    filter: grayscale(80%);
  }

  img {
    -webkit-user-drag: none;
  }
}



.app {
  user-select: none;
  cursor: default;
  height: 100%;
  color: $default-font-color;
  box-sizing: border-box;
  display: flex;
  justify-content: stretch;

  pre {
    user-select: text;
  }

  .app-side-bar {
    background-image: linear-gradient(to bottom, #fbc2ebca 0%, #f5efefcc 100%);
    backdrop-filter: blur(5px);
    @at-root .formium-app-activated.formium-deactivate & {
      backdrop-filter: brightness(70%) blur(5px);
      // background-image: linear-gradient(to top, #abadaeca 0%, #edebebcc 100%);
    }

    user-select: none;
    width: 16rem;
    padding: 1rem 1rem 0rem 1rem;
    z-index: 1;
    color: $nav-font-color;
    box-shadow: 0 0 5px rgba($secondary-color, 1);

    display: flex;
    flex-direction: column;

    -webkit-app-region: drag;
    position: relative;

    .system-commands {
      position: absolute;
      justify-content: flex-end;
      display: flex;
      -webkit-app-region: no-drag;
      right: 0.5rem;
      top: 0.5rem;
      > div {
        height: 2rem;
        width: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color ease 150ms;
        border-radius: 0.5rem;

        > span {
          font-family: "iconfont" !important;
          font-size: 8px;
          font-style: normal;
          font-weight: 100;
        }

        &:hover {
          background-color: rgba(darken($secondary-color, 55%), 0.8);
          color: #fff;
          &:active {
            background-color: rgba(darken($secondary-color, 45%), 0.5);
          }
        }
      }
    }

    .app-nav-menu {
      padding: 0.5rem 0;
      -webkit-app-region: no-drag;

      &.extra-menu {
        > .nav-menu-item {
          .item-icon {
            .icon {
              fill: $dim-color;
            }
          }
        }
      }

      > .nav-menu-item {
        padding: 0.5rem 0.5rem 0.5rem 0.8rem;
        font-weight: 200;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: background-color ease 200ms;
        display: flex;
        align-items: center;
        border: solid 1px transparent;

        .item-icon {
          display: flex;
          margin-right: 1rem;
          .icon {
            width: 24px;
            height: 24px;
            fill: $primary-color;
          }
        }

        &:hover {
          background-color: rgba(darken($mute-color, 0.95), 0.3);
          border: solid 1px rgba(darken($mute-color, 0.95), 0.7);
          color: $primary-font-color;
          text-shadow: 0 0 5px #fff;
          .item-icon {
            .icon {
              fill: $default-font-color;
            }
          }
          &:active {
            background-color: rgba(darken($mute-color, 0.9), 0.3);
          }
        }

        &.active {
          background-color: rgba($primary-color, 1);
          color: #fff;
          cursor: default;
          border: solid 1px transparent;
          text-shadow: none;

          .item-icon {
            .icon {
              fill: white;
            }
          }

          &:active {
            background-color: rgba($primary-color, 1);
          }
        }
      }
    }

    > .top-aside {
    }

    > .middle-aside {
      flex: 1;
    }

    > .bottom-asisde {
    }
  }

  .app-page-view {
    flex: 1;
    position: relative;
    overflow: hidden;

    background-image: linear-gradient(to bottom, #a8edeacf 30%, #fed6e3ca 100%);

    .app-command-bar {
      user-select: none;
      height: 2.5em;
      box-sizing: border-box;
      display: flex;
      -webkit-app-region: drag;
      z-index: 1;
      padding-right: 1rem;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;

      transition: box-shadow ease-in-out 300ms;

      &.stay {
        background-image: linear-gradient(
          to bottom,
          #fdfbfba0 30%,
          #ebedeeea 100%
        );
        box-shadow: 0 3px 17px rgba(#333, 0.4);
        backdrop-filter: blur(8px);
      }

      > .title-bar {
        flex: 1;
      }
      > .system-commands {
        justify-content: flex-end;
        display: flex;
        -webkit-app-region: no-drag;

        > div {
          height: 2.5rem;
          width: 3.25rem;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color ease 150ms;

          > span {
            font-family: "iconfont" !important;
            font-size: 8px;
            font-style: normal;
            font-weight: 100;
          }

          &:hover {
            background-color: darken($primary-color, 0.95);
            color: #fff;
            &:active {
              background-color: darken($primary-color, 0.9);
            }
          }

          &.close-btn:hover {
            background-color: #e81123;
            &:active {
              background-color: #dd5d67;
            }
          }
        }
      }
    }

    .app-page {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 2.5rem 1.5rem 0 1.5rem;
      overflow: auto;
      position: absolute;

      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      &::-webkit-scrollbar-track {
        margin-top: 2.5rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 4px;
        transition: background-color ease 200ms;
      }

      &::-webkit-scrollbar-thumb:active,
      &::-webkit-scrollbar-thumb:hover {
        height: 50px;
        background-color: #aaa;
      }
      &::-webkit-scrollbar {
        padding-top: 2.5em;
      }

      > div {
        position: relative;

        .switcher {
          position: sticky;
          top: 0;
          left: 0;
          background-color: white;
          padding: 1rem 0;
          margin-bottom: 1rem;
        }
      }

      article {
        section {
          margin-bottom: 3rem;
        }

        .section-block {
          background: #ffffff33;
          border-radius: 1.5rem;
          padding: 2rem 2.5rem;
          backdrop-filter: blur(10px);
          margin: 1.5rem 0 2.5rem 0;
          box-shadow: 3px 3px 12px rgba(Gray, 0.5);

          > p,
          h5 {
            text-shadow: 0px 0px 3px #fff;
          }
          .alert-light {
            background-color: rgba(#fefefe, 0.4);
            border-color: rgba(#afafaf, 0.3);
            color: #333;

            > pre {
              color: #333;
              margin: 0;
            }
          }
        }
      }
    }
  }
}
